import { useEffect, useReducer, useRef, useState } from "react"
import HomePage_ModalComponent from "../../../../component/modal"
import lessModule from "./index.module.less"
import { Table } from "antd/lib"
import { TableRowSelection } from "antd/es/table/interface"
import { Divider, Space, TableColumnsType } from "antd"
import downArrowImage from "../../../../../../assets/image/homePage-menuDownArrow.png"
import rightArrowImage from "../../../../../../assets/image/homePage-menuRightArrow.png"
import fileImage from "../../../../../../assets/image/homePage-dataFileManagement-file.png"
import { render } from "@testing-library/react"
import { $eventBus, $EventBus_off, $EventBus_on } from "../../../../../../common/utils"
// 主页-数据维护页面-数据文件管理页面
const HomePage_DataMaintenancePage_DataFileManagementPage: React.FC = () => {
    const mainRef = useRef<HTMLDivElement>(null);
    const [scrollHeight, setScrollHeight] = useState<number>(0)
    const columnList = [
        {
            title: '序号',
            width: 70,
            render: (text: string, record: object, idx: number) => !record["level"] && <span>{idx + 1}</span>,
        },
        {
            title: '文件夹',
            nimWidtj:100,
            dataIndex: 'name',
            render: (text: string, record: object, idx: number) => (
                <div className={lessModule["homePageDataMaintenancePageDataFileManagementPage-main__expanded"]} style={{ marginLeft: 48 + 24 * (record["level"] - (record["level"] && !record["children"] ? 1 : 0)) }}> {text} </div>
            )
        },
        {
            title: (
                <>
                    <Divider className={lessModule["homePageDataMaintenancePageDataFileManagementPage-main__headerDivider"]} type="vertical" />
                    <span>修改日期</span>
                </>
            ),
            dataIndex: 'age',
            width: "50%",
            render: (text: string, record: object, idx: number) => (
                <span className={lessModule["homePageDataMaintenancePageDataFileManagementPage-main__dateString"]}> {text} </span>
            )
        },
    ];

    const [sourceList, setSourceList] = useState<Array<object>>([
        {
            level: 0,
            key: 3,
            name: '1',
            age: 32,
            address: 'Sydney No. 1 Lake Park',
        },
        {
            level: 0,
            key: 1,
            name: 'John Brown sr.',
            age: 60,
            address: 'New York No. 1 Lake Park',
            children: [
                {
                    level: 1,
                    key: 11,
                    name: 'John Brown',
                    age: 42,
                    address: 'New York No. 2 Lake Park',
                },
                {
                    level: 1,
                    key: 12,
                    name: 'John Brown jr.',
                    age: 30,
                    address: 'New York No. 3 Lake Park',
                    children: [
                        {
                            level: 2,
                            key: 121,
                            name: 'Jimmy Brown',
                            age: 16,
                            address: 'New York No. 3 Lake Park',
                        },
                    ],
                },
                {
                    level: 1,
                    key: 13,
                    name: 'Jim Green sr.',
                    age: 72,
                    address: 'London No. 1 Lake Park',
                    children: [
                        {
                            level: 2,
                            key: 131,

                            name: 'Jim Green',
                            age: 42,
                            address: 'London No. 2 Lake Park',
                            children: [
                                {
                                    level: 3,
                                    key: 1311,
                                    name: 'Jim Green jr.',
                                    age: 25,
                                    address: 'London No. 3 Lake Park',
                                },
                                {
                                    level: 3,
                                    key: 1312,
                                    name: 'Jimmy Green sr.',
                                    age: 18,
                                    address: 'London No. 4 Lake Park',
                                },
                            ],
                        },
                    ],
                },
            ],
        },
        {
            level: 0,
            key: 2,
            name: 'Joe Black',
            age: 32,
            address: 'Sydney No. 1 Lake Park',
        },

    ]);

    const init_scrollHeight = () => {
        if (mainRef.current) {


            // mainRef.current.style.height = `${mainRef.current.clientHeight}px`

            setScrollHeight(mainRef.current.clientHeight - 60)
        }
    }
    const className_tableRow = (record: object, idx: number) => {
        return idx % 2 ? "" : lessModule["homePageDataMaintenancePageDataFileManagementPage-main__tableRow"]
    }

    const click_expandedIcon = (func, data: object, event: any) => {
        event.stopPropagation(); // 防止点击事件冒泡  
        data["expanded"] = !data["expanded"]
        setSourceList([...sourceList])
        func(data, event)
    }

    const onSelectChange = (newSelectedRowKeys: Array<React.Key>, selectedRows: Array<object>) => {

    }

// 广播函数数据
const eventBusFuncData = {
    homePageHeaderOperationComponentOperationComponent_upload:(data) => {
        // setIsModal(data)
    }
}
    useEffect(() => {
        $EventBus_on(eventBusFuncData)
        init_scrollHeight()
        return () => {
            $EventBus_off(eventBusFuncData)
        }
    }, [])

    return (
        <div className={lessModule["homePageDataMaintenancePageDataFileManagementPage"]}>
            <header className={lessModule["homePageDataMaintenancePageDataFileManagementPage-header"]}>
                <Space size={8}>
                    <span>已选择</span>
                    <span> {12} </span>
                    <span> 项目，共 </span>
                    <span className={lessModule["homePageDataMaintenancePageDataFileManagementPage-header__value"]}> {266.5} </span>
                    <span> MB </span>
                </Space>
            </header>
            <main ref={mainRef} className={lessModule["homePageDataMaintenancePageDataFileManagementPage-main"]}>
                <Table
                    columns={columnList}
                    rowSelection={{
                        onChange: onSelectChange,
                        checkStrictly: false
                    }}
                    scroll={{ y: scrollHeight }}
                    rowClassName={className_tableRow}
                    expandable={{
                        expandIcon: ({ expanded, onExpand, record }) => record["children"] && <div className={lessModule["homePageDataMaintenancePageDataFileManagementPage-main__expandIcon"]} style={{ left: 83 + 18 * record["level"] }}>
                            <img className="homePage-handleImage" src={expanded ? downArrowImage : rightArrowImage} onClick={(e) => click_expandedIcon(onExpand, record, e)} />
                            <img src={fileImage} />
                        </div>
                    }}
                    dataSource={sourceList}
                    pagination={false}
                />


            </main>
        </div>
    );

}
export default HomePage_DataMaintenancePage_DataFileManagementPage